<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div v-if="isIndex" class="index">
    <div class="group" v-for="compGroup in compIndex" :key="compGroup.name">
      
      <div class="group-name">{{ compGroup.name }}</div>

      <div class="group-list">
        <el-button
          v-for="comp in compGroup.compList"
          :key="comp.name"
          size="small"
          class="button"
          @click="toComp(comp)"
        >
          {{ comp.name }}
        </el-button>
      </div>

    </div>
  </div>
  <div v-else class="comp-area">

    <el-button size="small" class="back" @click="isIndex = true">回到目录</el-button>
    <component class="comp" :is="componentId" />

  </div>
</template>

<script setup>
import { ref } from 'vue'

import Comp1 from '@/components/comp1.vue'
const isIndex = ref(true)
const componentId = ref(Comp1)

const compIndex = [
  {
    name: 'css',
    compList: [
      {
        name: 'Comp1',
        compNode: Comp1
      }
    ]
  }
]

function toComp(comp) {
  isIndex.value = false
  componentId.value = comp.compNode
  console.log('toComp -- componentId.value:', componentId.value)
}
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  .group {
    margin-bottom: 10px;
    .group-name {
      font-size: 16px;
    }
    .group-list {
      margin-left: 10px;
      margin-top: 10px;
      .button {
        margin-right: 10px;
      }
    }
  }
}

.comp-area {
  width: 100%;
  height: 100%;
  position: relative;
  .back {
    position: absolute;
    right: 0;
    top: 0;
    border: 1px solid #ccc;
    // padding: 2px;
    display: inline-block;
  }
}
.comp {
  width: 100%;
  height: 100%;
}
</style>
